<template>
  <view class="category">
    <!-- 1.搜索框 -->
    <yg-search></yg-search>
    <view class="category_content">
      <view class="menu">
        <viwe
          @tap="onMenuTap(index)"
          :class="['menu_item', current === index ? 'active' : '']"
          v-for="(item, index) in menusList"
          :key="item"
          >{{ item }}</viwe
        >
      </view>
      <scroll-view class="category_list" scroll-y :scroll-top="scrollTop">
        <view class="category_group" v-for="item in goods" :key="item.cat_id">
          <view class="category_group_title">{{ item.cat_name }}</view>
          <view class="category_group_list">
            <navigator
              :url="`/pages/goods_list/goods_list?id=${item2.cat_id}`"
              class="category_group_list_item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <image :src="item2.cat_icon" mode="widthFix"></image>
              <view class="category_group_name">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import ygSearch from '../../components/ygSearch/ygSearch.vue';
// 完整的数据
let totalGoods = null;
export default {
  components: { ygSearch },
  data() {
    return {
      //左侧菜单
      menusList: [],
      //右侧商品
      goods: [],
      //选中菜单的索引
      current: 0,
      //滚动
      scrollTop: 0,
    };
  },
  async onLoad() {
    //获取分类
    this.getCategory();
  },
  methods: {
    //获取分类请求
    async getCategory() {
      let message = null;
      const cast = uni.getStorageSync("category");
      if (cast) {
        //有数据
        if (Date.now() - cast.time >= 10000) {
          //过期了
          message = (await this.$u.api.getcategory()).message;
          uni.setStorageSync("category", { time: Date.now(), list: message });
        } else {
          //没有过期
          message = cast.list;
        }
      } else {
        //没有数据
        message = (await this.$u.api.getcategory()).message;
        uni.setStorageSync("category", { time: Date.now(), list: message });
      }

      // message = (await this.$u.api.getcategory()).message;
      // console.log(message);
      this.menusList = message.map((v) => v.cat_name);
      this.goods = message[0].children;
      totalGoods = message;
    },
    //点击
    onMenuTap(current) {
      this.current = current;
      // console.log(current)
      // 让右侧商品根据 被点击的索引 改变显示的内容
      this.goods = totalGoods[current].children;
      this.scrollTop = Math.random() / 100;
    },
  },
};
</script>

<style lang="scss">
.category {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .search {
    background-color: #eb4450;
    padding: 10rpx;
  }
  .category_content {
    display: flex;
    flex: 1;
    overflow: hidden;
    .menu {
      width: 180rpx;
      overflow: auto;
      .menu_item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80rpx;
      }
      .active {
        color: #eb4450;
        /* currentColor =  当前的字体颜色 css自带 */
        border-left: 5rpx solid currentColor;
      }
    }
    .category_list {
      flex: 1;
      overflow: auto;
      .category_group {
        .category_group_title {
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          &::before {
            content: "/";
            margin-right: 10rpx;
          }
          &::after {
            content: "/";
            margin-left: 10rpx;
          }
        }
        .category_group_list {
          display: flex;
          flex-wrap: wrap;
          .category_group_list_item {
            width: 33.33%;
            text-align: center;
            image {
              // width: 60%;
              width: 128rpx;
              height: 128rpx;
              background-color: #eee;
            }
          }
        }
      }
    }
  }
}
</style>
